<template>
  <div id="app">
    <div v-if="photoFlag">
      <el-dialog
          title="修改头像"
          :visible.sync="photoFlag"
          width="40%">
        <ChangePhoto></ChangePhoto>
      </el-dialog>
    </div>

    <el-container>
      <el-header class="header">
        <el-menu
            :default-active="activeIndex"
            mode="horizontal"
            background-color="#2F4F4F"
            text-color="#fff"
            active-text-color="#ffd04b">
          <el-menu-item index="1" style="margin-left: 4%" v-on:click="toHome">
            <img style="height: 56px;margin-right: 8%" src="./assets/1.png" alt="logo">智慧养老系统
          </el-menu-item>
<!--          <el-menu-item index="2" style="margin-left: 4%" v-on:click="toHome">主页</el-menu-item>-->
          <el-submenu index="2" style="float: right;padding-right: 4%">
            <template slot="title">
              <el-avatar :src="getPhotoUrl"></el-avatar>
              {{getUserName}}
            </template>
            <el-menu-item index="3-1" v-if="getLoginState" v-on:click="ChangePhoto">修改头像</el-menu-item>
            <el-menu-item index="3-2" v-if="!getLoginState"  v-on:click="toLogin">登录</el-menu-item>
            <el-menu-item index="3-3" v-if="getLoginState"  v-on:click="onLogout">注销</el-menu-item>
            <el-menu-item index="3-4" v-if="!getLoginState" v-on:click="toRegister">注册</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-header>
      <el-main v-if="getLoginState" class="main">
        <el-col span="3">
          <el-row class="tac">
              <el-menu
                  default-active="2"
                  class="el-menu-vertical-demo"
                  @open="handleOpen"
                  @close="handleClose"
              >
                <el-submenu index="4">
                  <template slot="title">
                    <i class="el-icon-s-tools"></i>
                    <span>系统设置模块</span>
                  </template>
<!--                  <el-menu-item-group>-->
                    <el-menu-item class="submenu" index="4-1 " @click="toUserList()">  系统用户</el-menu-item>
                    <el-menu-item class="submenu" index="4-2" @click="toUserInfo()">  个人信息</el-menu-item>
<!--                  </el-menu-item-group>-->
<!--                  <el-menu-item-group title="分组2">-->
<!--                    <el-menu-item index="1-3">选项3</el-menu-item>-->
<!--                  </el-menu-item-group>-->
<!--                  <el-submenu index="1-4">-->
<!--                    <template slot="title">选项4</template>-->
<!--                    <el-menu-item index="1-4-1">选项1</el-menu-item>-->
<!--                  </el-submenu>-->
                </el-submenu>

                <el-submenu index="5">
                  <template slot="title">
                    <i class="el-icon-user-solid"></i>
                    <span>老年人信息管理</span>
                  </template>
                  <el-menu-item class="submenu" index="5-1 " @click="toElderList()">信息列表</el-menu-item>
                  <el-menu-item class="submenu" index="5-2" @click="toElderAnalysis()">统计分析</el-menu-item>
                </el-submenu>

<!--                <el-menu-item index="5" @click="toElderManagement()">-->
<!--                  <i class="el-icon-user-solid"></i>-->
<!--                  <span slot="title">老年人信息管理</span>-->
<!--                </el-menu-item>-->
                <el-submenu index="6">
                  <template slot="title">
                    <i class="el-icon-s-custom"></i>
                    <span>工作人员信息管理</span>
                  </template>
                  <el-menu-item class="submenu" index="6-1 " @click="toWorkerList()">信息列表</el-menu-item>
                  <el-menu-item class="submenu" index="6-2" @click="toWorkerAnalysis()">统计分析</el-menu-item>
                </el-submenu>

<!--                <el-menu-item index="6" @click="toWorkerManagement()">-->
<!--                  <i class="el-icon-s-custom"></i>-->
<!--                  <span slot="title">工作人员信息管理</span>-->
<!--                </el-menu-item>-->

                <el-submenu index="7">
                  <template slot="title">
                    <i class="el-icon-s-custom"></i>
                    <span>义工信息管理</span>
                  </template>
                  <el-menu-item class="submenu" index="7-1 " @click="toVolunteerList()">信息列表</el-menu-item>
                  <el-menu-item class="submenu" index="7-2" @click="toVolunteerAnalysis()">统计分析</el-menu-item>
                </el-submenu>

<!--                <el-menu-item index="7" @click="toVolunteerManagement()">-->
<!--                  <i class="el-icon-s-custom"></i>-->
<!--                  <span slot="title">义工信息管理</span>-->
<!--                </el-menu-item>-->

                <el-submenu index="8">
                  <template slot="title">
                    <i class="el-icon-s-data"></i>
                    <span>数据管理</span>
                  </template>
                  <el-menu-item class="submenu" index="8-1 " @click="toDataManagement()">实时报表</el-menu-item>
                </el-submenu>

<!--                <el-menu-item index="8" @click="toDataManagement()">-->
<!--                  <i class="el-icon-s-data"></i>-->
<!--                  <span slot="title">数据管理</span>-->
<!--                </el-menu-item>-->
                <el-menu-item index="9" @click="toCameraManagement()">
                  <i class="el-icon-video-camera-solid"></i>
                  <span slot="title">摄像头管理</span>
                </el-menu-item>

              </el-menu>

          </el-row>
        </el-col>
        <el-col v-if="getLoginState" span="21">
          <router-view></router-view>
<!--          <video controls autoplay src="http://127.0.0.1:5001/video_viewer" class="video"/>-->
<!--          <img class="video" src="http://127.0.0.1:5001/video_viewer">-->
        </el-col>
      </el-main>
      <el-main v-if="!getLoginState" class="main">
        <router-view></router-view>
      </el-main>

      <el-footer class="footer">
        <el-backtop></el-backtop>
        <div style="text-align: center;color:#5a5959;margin-top: 35px">版权所有© 南山敬老院</div>
      </el-footer>
    </el-container>
  </div>
</template>


<script>
import ChangePhoto from "@/components/ChangePhoto";

export default {
  name: "App",
  components:{ChangePhoto},
  data() {
    return {
      activeIndex: "1",
      photoFlag:false,
    }
  },
  computed: {
    // 计算属性的 getter
    getUserName: function () {
      // `this` 指向 vm 实例
      if(localStorage.getItem('userName') == null){
        return "未登录";
      }else{
        return localStorage.getItem('userName');
      }
    },
    getLoginState: function (){
      if(localStorage.getItem('userName') == null){
        return false;
      }else{
        return true;
      }
    },
    getPhotoUrl:function(){
      if(localStorage.getItem('userUrl') != "null") {
        return localStorage.getItem('userUrl');
      }
      else{
        return "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
      }
    }
  },
  methods: {
    testsession: function () {
      this.axios.get('/login/test').then((response) => {
        this.msg = response.data;
      }).catch((response) => {
        console.log(response);
      })
    },
    toHome: function () {
      console.log(this.$route.path);
      if (this.$route.path !== "/home") {
        this.$router.push("/home");
      }
    },
    toLogin: function () {
      console.log(this.$route.path);
      if (this.$route.path !== "/login") {
        this.$router.push("/login");
      }
    },
    onLogout: function () {
      // if (this.$route.path !== "/login") {
      //   this.$router.push({name:"Login",params:{isReload: 'true'}});
      // }
      const _this = this;

      let flag = false;
      _this.$store.commit('login', flag);
      localStorage.clear();
      console.log(_this.$route.path);
      _this.$message({
        message: '注销成功！',
        type: 'success'
      });
      _this.$router.push({name:"Login",params:{isReload: 'true'}});

      // this.$axios.post('/user/logout',{},{
      //   headers: {
      //     "Content-Type": "application/json;charset=utf-8"
      //   },
      //   withCredentials: true
      // }).then(function (response) {
      //   // 这里是处理正确的回调
      //   if(response.data.code == '503'){
      //     _this.$message({
      //       message: '您未登录！',
      //       type: 'success'
      //     });
      //   }else{
      //     if(response.data.code == '0'){
      //       let flag = false;
      //       _this.$store.commit('login', flag);
      //       localStorage.clear();
      //       console.log(_this.$route.path);
      //       _this.$message({
      //         message: '登出成功！',
      //         type: 'success'
      //       });
      //       _this.$router.go(0);
      //     }
      //   }

      // }).catch(function (response) {
      //   // 这里是处理错误的回调
      //   console.log(response)
      // })
    },
    toRegister: function () {
      let flag = false;
      this.$store.commit('login', flag);
      localStorage.clear();
      console.log(this.$route.path);
      if (this.$route.path !== "/register") {
        this.$router.push({name:"Register",params:{isReload: 'true'}});
      }
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    toCameraManagement:function(){
      if (this.$route.path !== "/cameraManagement") {
        this.$router.push({name:"CameraManagement",params:{isReload: 'true'}});
      }
    },
    ChangePhoto:function(){
      this.photoFlag = true;
    },
    toUserList: function(){
      if (this.$route.path !== "/userList") {
        this.$router.push({name:"UserList",params:{isReload: 'true'}});
      }
    },
    toUserInfo: function(){
      if (this.$route.path !== "/userInfo") {
        this.$router.push({name:"UserInfo",params:{isReload: 'true'}});
      }
    },
    toElderList: function(){
      if (this.$route.path !== "/elderManagement") {
        this.$router.push({name:"ElderManagement",params:{isReload: 'true'}});
      }
    },
    toWorkerList: function(){
      if (this.$route.path !== "/workerManagement") {
        this.$router.push({name:"WorkerManagement",params:{isReload: 'true'}});
      }
    },
    toVolunteerList: function(){
      if (this.$route.path !== "/volunteerManagement") {
        this.$router.push({name:"VolunteerManagement",params:{isReload: 'true'}});
      }
    },
    toDataManagement: function(){
      if (this.$route.path !== "/dataManagement") {
        this.$router.push({name:"DataManagement",params:{isReload: 'true'}});
      }
    },
    toElderAnalysis: function(){
      if (this.$route.path !== "/elderAnalysis") {
        this.$router.push({name:"ElderAnalysis",params:{isReload: 'true'}});
      }
    },
    toWorkerAnalysis: function(){
      if (this.$route.path !== "/workerAnalysis") {
        this.$router.push({name:"WorkerAnalysis",params:{isReload: 'true'}});
      }
    },
    toVolunteerAnalysis:function(){
      if (this.$route.path !== "/volunteerAnalysis") {
        this.$router.push({name:"VolunteerAnalysis",params:{isReload: 'true'}});
      }
    },
  }
}
</script>

<style scoped>
.header, .footer, .main {
  padding: 0;
}

.main {
  min-height: calc(100vh - 121px)
}

.video {
  margin-top: 30px;
  margin-left: 80px;
  width:800px;
}


.el-col-12{
  width: 15%;
}
</style>
